<template>
  <div class="profile">
    <van-button v-if="!isLogin" type="info" style="width:100%" @click="$router.push('/login')">登录/注册</van-button>
    <div v-else>
      <van-image width="100" height="100" :src="'http://elm.cangdu.org/img/'+user.avatar" />
      姓名： {{user.username}}
      <van-button type="info" style="width:100%" @click="toModify">修改信息</van-button>
      <van-button type="info" style="width:100%" @click="outUser">退出</van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "profile",
  computed: {
    ...mapState(["user", "isLogin"])
  },
  methods: {
    outUser() {
      //退出登录
      //请求退出接口
      this.$store.commit("outUser");
    },
    toModify() {
      //修改信息
      this.$router.push({
        name: "modify",
        params: {
          id: this.user.user_id
        }
      });
    }
  },
  mounted() {
    window.console.log(123);
  }
};
</script>

<style lang="stylus" scoped>
.profile {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
</style>